import React, { useState, useEffect } from "react";
import { Sidebar, ProductCard, Dialog } from "react-vant";
import axios from "axios";
import "./index.css";
const Index: React.FC = () => {
  const [tab, setab] = useState<any>([]);
  const [active, setActive] = useState<number>(0);
  const [kk, setKk] = useState<any>({});
  const [visible, setVisible] = useState<boolean>(false);
  useEffect(() => {
    axios.get("/api/tab").then((resp) => {
      setab(resp.data.tab);
    });
  }, []);
  const look = (i: any) => {
    console.log(tab[active].children[i]);
    setKk(tab[active].children[i]);
    setVisible(true);
  };

  return (
    <div className="wrap">
      <Dialog
        visible={visible}
        title={kk.title}
        showCancelButton
        onConfirm={() => {
          setVisible(false);
        }}
        onCancel={() => setVisible(false)}
      >
        <img className="demo-dialog-img" src={kk.img} alt="2131" />
        <div>标题:{kk.title}</div>
        <div>价格:{kk.price}</div>
        <div>介绍:{kk.word}</div>
      </Dialog>
      <div className="left">
        <Sidebar
          value={active}
          onChange={(v) => {
            setActive(v);
          }}
        >
          {tab.map((v: any, i: any) => (
            <Sidebar.Item title={v.title} key={i} />
          ))}
        </Sidebar>
      </div>
      <div className="right">
        {tab.length > 0 &&
          tab[active].children.map((v: any, i: any) => (
            <div key={i} onClick={() => look(i)}>
              <ProductCard
                price={v.price}
                desc={v.word}
                title={v.title}
                thumb={v.img}
                key={v.id}
              />
            </div>
          ))}
      </div>
    </div>
  );
};
export default Index;
